<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery表格隔行换色插件</title>
	<script type="text/javascript" src="../../static/js/jquery/jquery-3.0.0.js"></script>
	<script type="text/javascript" src="../../static/js/jquery/jquery-setTableColor.js"></script>
	<script type="text/javascript">
		/*
		//页面加载完毕，使得具有隔行换色效果
		//但是这个方法每次做表格都要写，太麻烦，所以考虑用插件，
		$(function(){
			$('tr:first').css('background-color','yellow');
			$('tr:gt(0):odd').css('background-color','lightblue');
		});*/
		
		/*
		//用插件
		$.fn.setTableColor=function(c1,c2){
			//this代表jquery对象
			//首行颜色
			this.find('tr:first').css('background-color',c1);
			//其余行
			this.find('tr:gt(0):odd').css('background-color',c2);
		}*/
		$(function(){
			$('table').setTableColor('lightblue','yellow');
		});
	</script>
	<style type="text/css">
		table{width:700px;margin:auto;border:1px solid black;border-collapse:collapse;}
		td{border:1px solid black;}
		h2{width:700px;margin:auto;text-align:center;}
	</style>
</head>
<body>
	<h2>表格隔行换色</h2>
	<table>
		<#list roles as role>
		<tr>
			<td>${role.roleId!}</td>
			<td>${role.roleName}</td>
			<td>${role.deleted}</td>
			<td><a href = "./permissionManager?roleId=${role.roleId}">修改权限 </a></td>
		</tr>
		</#list>
	</table>
	<br>
	<br>
	<br>
	<br>
	添加一个角色
	<form action="./addRole" method="post">
		roleName<input name="roleName" >
		<br>
		<input type="submit" value="提交">
	</form>
	
</body>
</html>